<template>
  <div>
    <p>原料采购退货</p>
    <div class="container">
      <div class="handle-box">
        <el-button
          type="primary"
          class="handle-del mr10"
          size="small"
          @click="delAllSelection(ids)"
          >批量删除</el-button
        >
        <el-button
          type="primary"
          class="handle-del mr10"
          size="small"
          @click="add"
          >新增</el-button
        >
        <el-button type="primary" size="small" @click="handleSearch"
          >查询</el-button
        >
        <el-button type="primary" size="small" @click="handleExport"
          ><a href="http://172.16.6.124:8080/gold/purchaseReturn/export"
             class="aColor">导出报表</a
          ></el-button
        >
      </div>
      <!-- 查询框 -->
      <div v-show="isQuery">
        <el-form ref="form" :model="form" label-width="70px" :inline="true">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="单据编号" prop="number">
                <el-input v-model="form.number"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="商品类型" prop="commodity_type">
                <el-select
                  v-model="form.commodity_type"
                  class="handle-select mr10"
                >
                  <el-option key="11" label="镶嵌类" value="镶嵌类"></el-option>
                  <el-option key="12" label="钻石类" value="钻石类"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="供应商" prop="supplier">
                <el-select v-model="form.supplier" class="handle-select mr10">
                  <el-option key="21" label="国信安" value="国信安"></el-option>
                  <el-option key="22" label="产业园" value="产业园"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="出库门店" prop="outstore">
                <el-select v-model="form.outstore" class="handle-select mr10">
                  <el-option
                    key="31"
                    label="四川分店"
                    value="四川分店"
                  ></el-option>
                  <el-option key="32" label="总部" value="总部"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="出库柜台" prop="delivery_counter">
                <el-select
                  v-model="form.delivery_counter"
                  class="handle-select mr10"
                >
                  <el-option key="41" label="素金类" value="素金类"></el-option>
                  <el-option key="42" label="钻石类" value="钻石类"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="创单人" prop="creator">
                <el-input v-model="form.creator" class="handle-select mr10">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            size="small"
            @click="saveQuery(), closeFormDialog()"
            >确认查询</el-button
          >
          <el-button type="success" size="small" @click="queryNone"
            >收 起</el-button
          >
          <el-button
            type="primary"
            size="small"
            @click="saveExport"
            v-show="isExport"
            >确认导出</el-button
          >
        </span>
      </div>
      <br />
      <!-- 渲染表格数据 -->
      <el-table
        :data="
          tableData.slice(
            (query.pageIndex - 1) * query.pageSize,
            query.pageIndex * query.pageSize
          )
        "
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
        @selection-change="handleSelectionChange"
        @select="checkone"
        @select-all="checkall"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column label="行号" width="55" align="center">
          <template slot-scope="scope">
            {{ (query.pageIndex - 1) * query.pageSize + (scope.$index + 1) }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag
              :type="
                scope.row.status === 0
                  ? 'primary'
                  : scope.row.status === 1
                  ? 'danger'
                  : scope.row.status === 2
                  ? 'success'
                  : ''
              "
              >{{
                scope.row.status === 0
                  ? "已通过"
                  : scope.row.status === 1
                  ? "已驳回"
                  : scope.row.status === 2
                  ? "待审核"
                  : ""
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="number"
          label="单据编号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="created"
          label="创单日期"
          width="100"
          align="center"
          :formatter="DateHandler"
        ></el-table-column>
        <el-table-column
          prop="outstore"
          label="出库门店"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="delivery_counter"
          label="出库柜台"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="supplier"
          label="供应商"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="commodity_type"
          label="商品类型"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="amount"
          label="数量"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="weight"
          label="重量"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="cost"
          label="成本"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="coefficient"
          label="系数"
          align="center"
        ></el-table-column>
        <el-table-column prop="money" label="标签金额" align="center">
          <template slot-scope="scope">￥{{ scope.row.money }}</template>
        </el-table-column>
        <el-table-column
          prop="resourse"
          label="来源"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="creator"
          label="创单人"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="approver"
          label="审批人"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="approve_time"
          label="审批日期"
          width="100"
          align="center"
          :formatter="DateHandler"
        ></el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              class="green"
              @click="handleAuditPass(scope.$index, scope.row)"
              disabled
              v-if="scope.row.status === 0"
              >审批通过</el-button
            >
            <el-button
              type="text"
              class="green"
              @click="handleAuditRevoke(scope.row)"
              v-else-if="scope.row.status === 1"
              >撤销驳回</el-button
            >
            <el-button
              type="text"
              class="green"
              @click="handleAudit(scope.$index, scope.row)"
              v-else
              >审核</el-button
            >
            <el-button type="text" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button type="text" class="red" @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页部分 -->
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="query.pageIndex"
          :page-size="query.pageSize"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>

    <!--新增框弹出-->
    <el-dialog
      title="选择退货商品"
      :visible.sync="addVisible"
      width="70%"
      @close="closeFormDialog"
    >
      <el-form
        ref="addForm"
        :model="addForm"
        label-width="70px"
        :inline="true"
        :rules="rules"
      >
        <el-row :gutter="20">
          <!-- <el-col :span="8">
            <el-form-item label="id">
              <el-input v-model="form.id" val=" " class="input1" disabled="disabled"></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="状态">
              <el-select
                v-model="addForm.status"
                placeholder="请选择"
                class="input1"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单据编号" prop="number">
              <el-select
                v-model="addForm.number"
                class="handle-select mr10"
                @visible-change="numberSearch"
              >
                <el-option
                  v-for="item in list"
                  :key="item.number"
                  :label="item.number"
                  :value="item.number"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="创单日期" prop="created">
              <el-date-picker
                v-model="addForm.created"
                align="right"
                type="date"
                placeholder="选择日期"
                class="input1"
                :formatter="DateHandler"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出库门店" prop="outstore">
              <el-select
                v-model="addForm.outstore"
                class="handle-select mr10"
                @visible-change="outstoreSearch"
              >
                <el-option
                  v-for="item in list"
                  :key="item.name"
                  :label="item.label"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出库柜台" prop="delivery_counter">
              <el-select
                v-model="addForm.delivery_counter"
                class="handle-select mr10"
                @visible-change="counterSearch"
              >
                <el-option
                  v-for="item in list"
                  :key="item.name"
                  :label="item.label"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="供应商" prop="supplier">
              <el-select
                v-model="addForm.supplier"
                class="handle-select mr10"
                @visible-change="supplierSearch"
                >>
                <el-option
                  v-for="item in list"
                  :key="item.name"
                  :label="item.label"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商品类型" prop="commodity_type">
              <el-select
                v-model="addForm.commodity_type"
                class="handle-select mr10"
                @visible-change="typeSearch"
              >
                <el-option
                  v-for="item in list"
                  :key="item.name"
                  :label="item.label"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="数量" prop="amount">
              <el-input
                v-model="addForm.amount"
                class="handle-select mr10"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="重量" prop="weight">
              <el-input
                v-model="addForm.weight"
                class="handle-select mr10"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="成本" prop="cost">
              <el-input v-model="addForm.cost" class="input1"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="系数" prop="coefficient">
              <el-input
                v-model="addForm.coefficient"
                class="handle-select mr10"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="标签金额" prop="money">
              <el-input v-model="addForm.money" class="input1"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="来源" prop="resourse">
              <el-select v-model="addForm.resourse" class="handle-select mr10">
                <el-option key="111" label="采购" value="采购"></el-option>
                <el-option key="222" label="赠送" value="赠送"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创单人" prop="creator">
              <el-input v-model="addForm.creator" class="handle-select mr10">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="审批人" prop="approver">
              <el-input
                v-model="addForm.approver"
                class="input1"
                disabled="disabled"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="审核日期" prop="approve_time">
              <el-date-picker
                v-model="addForm.approve_time"
                align="right"
                type="date"
                placeholder="选择日期"
                class="input1"
                disabled
                :formatter="DateHandler"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveTuiHuo">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 审核弹出框 -->
    <el-dialog title="审核" :visible.sync="auditVisible" width="70%">
      <el-form ref="form" :model="form" label-width="70px" :inline="true">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="id">
              <el-input v-model="form.id" readonly="readonly"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="状态">
              <el-select
                v-model="form.status"
                class="handle-select mr10"
                readonly="readonly"
              ></el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单据编号">
              <el-input
                v-model="form.number"
                disabled="disabled"
                readonly="readonly"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="创单日期">
              <el-date-picker
                v-model="form.created"
                align="right"
                type="date"
                placeholder="选择日期"
                class="block"
                readonly="readonly"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出库门店">
              <el-select
                v-model="form.outstore"
                class="handle-select mr10"
                readonly="readonly"
              >
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出库柜台">
              <el-select
                v-model="form.delivery_counter"
                class="handle-select mr10"
                readonly="readonly"
              >
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="供应商">
              <el-select
                v-model="form.supplier"
                class="handle-select mr10"
                readonly="readonly"
              >
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商品类型">
              <el-select
                v-model="form.commodity_type"
                class="handle-select mr10"
                readonly="readonly"
              >
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="数量">
              <el-input v-model="form.amount" readonly="readonly"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="重量">
              <el-input v-model="form.weight" readonly="readonly"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="成本">
              <el-input v-model="form.cost" readonly="readonly"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="系数">
              <el-input
                v-model="form.coefficient"
                readonly="readonly"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="标签金额">
              <el-input v-model="form.money" readonly="readonly"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="来源">
              <el-select
                v-model="form.resourse"
                class="handle-select mr10"
                readonly="readonly"
              >
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创单人">
              <el-select
                v-model="form.creator"
                class="handle-select mr10"
                readonly="readonly"
              >
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="审批人">
              <el-select v-model="form.approver" class="handle-select mr10">
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="审批日期">
              <el-date-picker
                v-model="form.approve_time"
                align="right"
                type="date"
                placeholder="选择日期"
                class="block"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" @click="shenBack">审批驳回</el-button>
        <el-button type="primary" @click="shenPass">审批通过</el-button>
      </span>
    </el-dialog>
    <!-- 编辑弹出框 -->
    <el-dialog title="修改编辑" :visible.sync="editVisible" width="70%">
      <el-form ref="form" :model="form" label-width="70px" :inline="true">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="id">
              <el-input v-model="form.id" disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="状态">
              <el-select
                v-model="form.status"
                class="handle-select mr10"
              ></el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单据编号">
              <el-input v-model="form.number" disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="创单日期">
              <el-date-picker
                v-model="form.created"
                align="right"
                type="date"
                placeholder="选择日期"
                class="input1"
                disabled
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出库门店">
              <el-select v-model="form.outstore" class="handle-select mr10">
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出库柜台">
              <el-select
                v-model="form.delivery_counter"
                class="handle-select mr10"
              >
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="供应商">
              <el-select v-model="form.supplier" class="handle-select mr10">
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商品类型">
              <el-select
                v-model="form.commodity_type"
                class="handle-select mr10"
              >
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="数量">
              <el-input v-model="form.amount"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="重量">
              <el-input v-model="form.weight"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="成本">
              <el-input v-model="form.cost"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="系数">
              <el-input v-model="form.coefficient"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="标签金额">
              <el-input v-model="form.money"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="来源">
              <el-select v-model="form.resourse" class="handle-select mr10">
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="创单人">
              <el-select v-model="form.creator" class="handle-select mr10">
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="审批人">
              <el-select v-model="form.approver" class="handle-select mr10">
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="审批日期">
              <el-date-picker
                v-model="form.approve_time"
                align="right"
                type="date"
                placeholder="选择日期"
                class="block"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "commodity",
  data: function() {
    return {
      query: {
        name: "",
        pageIndex: 1,
        pageSize: 4
      },
      state: ["已通过", "已驳回", "待审批"],
      options: [
        {
          value: "0",
          label: "已通过",
          disabled: true
        },
        {
          value: "1",
          label: "已驳回",
          disabled: true
        },
        {
          value: "2",
          label: "待审批"
        }
      ],
      tableData: [],
      multipleSelection: [],
      delList: [],
      list: [],
      delarr: [],
      ids: "",
      // 新增部分
      addVisible: false,
      tableAddData: [],
      //查询部分
      isQuery: false,
      //导出报表部分
      isExport: false,
      //审核部分
      auditVisible: false,
      //编辑部分
      editVisible: false,
      //分页部分
      pageTotal: 0,
      currentPage: 1,
      //数据展示部分
      form: {
        id: "",
        status: "",
        number: "",
        created: "",
        outstore: "",
        delivery_counter: "",
        supplier: "",
        commodity_type: "",
        amount: "",
        weight: "",
        cost: "",
        coefficient: "",
        money: "",
        resourse: "",
        creator: "",
        opprover: "",
        approve_time: ""
      },
      //添加form
      addForm: {
        id: "",
        status: "2",
        number: "",
        created: "",
        outstore: "成华分公司",
        delivery_counter: "白金柜台",
        supplier: "成都公司",
        commodity_type: "素金类",
        amount: "",
        weight: "",
        cost: "",
        coefficient: "",
        money: "",
        resourse: "采购",
        creator: "",
        opprover: "",
        approve_time: ""
      },
      idx: "",
      id: "",
      //日期格式化
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      //创单日期默认为当前日期
      value1: "",
      //验证
      rules: {
        number: [{ required: true, message: "内容不能为空", trigger: blur }]
      }
    };
  },
  created() {
    this.getData();
  },
  mounted() {
    let that = this;
    that.getdatatime();
  },
  methods: {
    getdatatime() {
      //默认显示今天
      this.value1 = new Date();
    },
    checkone(selection) {
      var arr = [];
      for (var i = 0; i < selection.length; i++) {
        arr.push(selection[i].id);
      }
      this.ids = arr;
    },
    checkall(selection) {
      var arr = [];
      for (var i = 0; i < selection.length; i++) {
        arr.push(selection[i].id);
      }
      this.ids = arr;
    },
    // 获取列表数据(get)
    getData() {
      //console.log(this.query.pageIndex)
      this.$axios
        .post(this.$api.tuihuo.findAll, {
          params: {
            id: this.id,
            currentPage: this.query.pageIndex,
            pageSize: this.query.pageSize
          }
        })
        .then(response => {
          var result = response.data.data.list;
          this.list = result;
          console.log(this.list);
          this.tableData = result;
          this.pageTotal = response.data.data.total || 0;
          // console.log(this.pageTotal);
          var totalPage2 = Math.ceil(this.pageTotal / this.query.pageSize);
          if (totalPage2 < this.query.pageIndex) {
            console.log("in");
            this.query.pageIndex = totalPage2;
            this.getData();
          }
        })
        .catch(err => {
          console.log(err);
          this.$message.eror({
            message: "请求出错,请检查",
            center: true,
            duration: 2000
          });
        });
    },
    // 日期格式化
    DateHandler(row) {
      return new Date(row.approve_time).toLocaleDateString();
    },
    //重置form框的值
    closeFormDialog() {
      this.$refs.form.resetFields();
    },
    // 触发查询按钮
    handleSearch() {
      this.isQuery = true;
      this.isExport = false;
    },
    // 查询操作(post)
    saveQuery() {
      this.$axios
        .post(
          this.$api.tuihuo.find,
          {
            pageNum: this.query.pageIndex,
            pagesize: this.query.pageSize,
            number: this.form.number,
            commodity_type: this.form.commodity_type,
            supplier: this.form.supplier,
            outstore: this.form.outstore,
            delivery_counter: this.form.delivery_counter,
            creator: this.form.creator
          },
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          //console.log(response);
          var result = response.data;
          //debugger
          this.tableData = response.data.data.list;
          //console.log(response);
          //console.log(this.tableData);
          this.pageTotal = response.data.data.total || 0;
          if (result.msg === "查询成功!") {
            this.showQueryData();
          } else {
            this.$message.success(result.msg);
          }
        })
        .catch(err => {
          console.log(err);
          this.$message.eror({
            message: "请求出错,请检查",
            center: true,
            duration: 2000
          });
        });
    },
    // 收起查询框
    queryNone() {
      this.isQuery = false;
    },
    // 展示查询后的数据(post)
    showQueryData() {
      this.$axios
        .post(
          this.$api.tuihuo.find,
          {},
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          console.log(response);
        })
        .catch(err => {
          console.log(err);
          this.$message.eror({
            message: "请求出错,请检查",
            center: true,
            duration: 2000
          });
        });
    },
    //单据编号(post)
    numberSearch() {
      this.$axios
        .post(
          this.$api.tuihuo.findNumber,
          {},
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          console.log(JSON.stringify(response));
          this.list = response.data.data;
          //console.log(this.item)
          //console.log(this.list)
        })
        .catch(err => {
          console.log(err);
          this.$message.error({
            message: "请求出错，请检查",
            center: true,
            duration: 2000
          });
        });
    },
    //供应商(post)
    supplierSearch() {
      this.$axios
        .post(
          this.$api.tuihuo.findSupplier,
          {},
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          console.log(response);
          //debugger
          this.list = response.data.data;
          //console.log(this.item)
          //console.log(this.list)
        })
        .catch(err => {
          console.log(err);
          this.$message.error({
            message: "请求出错，请检查",
            center: true,
            duration: 2000
          });
        });
    },
    //商品类型(post)
    typeSearch() {
      this.$axios
        .post(
          this.$api.tuihuo.findCommodityType,
          {},
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          console.log(response);
          //debugger
          this.list = response.data.data;
          console.log(this.item);
          console.log(this.list);
        })
        .catch(err => {
          console.log(err);
          this.$message.error({
            message: "请求出错，请检查",
            center: true,
            duration: 2000
          });
        });
    },
    //出库门店(post)
    outstoreSearch() {
      this.$axios
        .post(
          this.$api.tuihuo.findOutstore,
          {},
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          //console.log(response)
          //debugger
          this.list = response.data.data;
          //console.log(this.item)
          //console.log(this.list)
        })
        .catch(err => {
          console.log(err);
          this.$message.error({
            message: "请求出错，请检查",
            center: true,
            duration: 2000
          });
        });
    },
    //柜台名称(post)
    counterSearch() {
      this.$axios
        .post(
          this.$api.tuihuo.findCounter,
          {},
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          //console.log(response)
          //debugger
          this.list = response.data.data;
          //console.log(this.item)
          //console.log(this.list)
        })
        .catch(err => {
          console.log(err);
          this.$message.error({
            message: "请求出错，请检查",
            center: true,
            duration: 2000
          });
        });
    },
    // 触发导出报表按钮
    handleExport() {
      this.isQuery = true;
      this.isExport = true;
    },
    // 删除操作(get)
    handleDelete(row) {
      // 二次确认删除(get请求)
      console.log(row);
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning"
      })
        .then(() => {
          //发起一个请求到服务器，让服务器删除这条数据
          console.log(row.id);
          this.$axios
            .get(this.$api.tuihuo.deletePurchaseReturn, {
              params: { id: row.id }
            })
            .then(response => {
              console.log(response);
              var result = response.data;
              //debugger
              console.log(result);
              if (result.msg === "删除成功!") {
                this.getData();
                this.$message.success(result.msg);
              } else {
                this.$message.success(result.msg);
              }
            })
            .catch(err => {
              console.log(err);
              this.$message.eror({
                message: "请求出错,请检查",
                center: true,
                duration: 2000
              });
            });
        })
        .catch(() => {});
    },
    // 删除多选操作
    handleSelectionChange(val) {
      console.log(val);
    },
    // 触发批量删除按钮
    delAllSelection(id) {
      console.log(id);
      // if (id == "") {
      //   this.$alert("请选择删除数据");
      //   return false;
      // }
      // if(Array.isArray(id)){
      //  id = [3];
      // }
      // console.log("aaa");
      this.$axios
        .post(this.$api.tuihuo.deleteByIds, this.ids, {
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(response => {
          var result = response.data;
          if (result.msg === "删除成功!") {
            this.getData();
            this.$message.success(result.msg);
          } else {
            this.$message.success(result.msg);
          }
          this.addVisible = false;
        })
        .catch(err => {
          console.log(err);
          this.$message.eror({
            message: "请求出错,请检查",
            center: true,
            duration: 2000
          });
        });
    },
    // 触发新增按钮
    add() {
      this.addVisible = true;
    },
    // 确定退货商品(post)
    saveTuiHuo() {
      console.log("aaaaaa___" + JSON.stringify(this.form));
      this.$axios
        .post(this.$api.tuihuo.addPurchaseReturn, this.addForm, {
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(response => {
          // console.log("aaa____"+JSON.stringify(response))
          // this.tableAddData = response.data.data.list;
          // this.pageTotal = response.data.data.total || 50;
          var result = response.data;
          console.log(result);
          if (result.msg === "添加成功!") {
            this.$message.success(result.msg);
            //this.pageTotal = response.data.data.total || 50;
            this.getData();
          } else {
            this.$message.success(result.msg);
          }
          this.addVisible = false;
        })
        .catch(err => {
          console.log(err);
          this.$message.eror({
            message: "请求出错,请检查",
            center: true,
            duration: 2000
          });
        });
    },
    // 审核操作
    handleAudit(index, row) {
      this.idx = index;
      this.form = { ...row };
      this.auditVisible = true;
    },
    // 审批通过(post)
    shenPass() {
      //将修改的状态发给服务器，接收服务器的响应，进行处理
      console.log(this.form.status);
      console.log(this.form.id);
      var state = (this.form.status = 0);
      this.$axios
        .post(
          this.$api.tuihuo.updatePurchaseReturn,
          {
            status: state,
            id: this.form.id
          },
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          var result = response.data;
          if (result.msg === "编辑成功!") {
            this.$message.success("审批成功!");
            this.getData();
            this.auditVisible = false;
          } else {
            this.$message.success("审核失败");
          }
        })
        .catch(err => {
          console.log(err);
          this.$message.eror({
            message: "请求出错,请检查",
            center: true,
            duration: 2000
          });
        });
    },
    // 审批驳回(post)
    shenBack() {
      //将修改的状态发给服务器，接收服务器的响应，进行处理
      console.log(this.form.status);
      console.log(this.form.id);
      var state = (this.form.status = 1);
      this.$axios
        .post(
          this.$api.tuihuo.updatePurchaseReturn,
          {
            status: state,
            id: this.form.id
          },
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(response => {
          var result = response.data;
          if (result.msg === "编辑成功!") {
            this.$message.success("审核驳回成功!");
            this.getData();
            this.auditVisible = false;
          } else {
            this.$message.success("撤销驳回");
          }
        })
        .catch(err => {
          console.log(err);
          this.$message.eror({
            message: "请求出错,请检查",
            center: true,
            duration: 2000
          });
        });
    },
    // 撤销驳回(post)
    handleAuditRevoke(row) {
      this.$confirm("确定要撤销驳回吗？", "提示", {
        type: "warning"
      })
        .then(() => {
          //将修改的状态发给服务器，接收服务器的响应，进行处理
          console.log(this.form.status);
          console.log(this.form.id);
          var state = (this.form.status = 2);
          this.$axios
            .post(
              this.$api.tuihuo.updatePurchaseReturn,
              {
                status: state,
                id: row.id
              },
              {
                headers: {
                  "Content-Type": "application/json"
                }
              }
            )
            .then(response => {
              var result = response.data;
              if (result.msg === "编辑成功!") {
                this.$message.success("撤销驳回成功!");
                this.getData();
                // this.auditVisible = false
              } else {
                this.$message.success("撤销驳回出错");
              }
            })
            .catch(err => {
              console.log(err);
              this.$message.eror({
                message: "请求出错,请检查",
                center: true,
                duration: 2000
              });
            });
        })
        .catch(() => {});
    },
    // 触发编辑按钮
    handleEdit(scope) {
      this.editVisible = true;
      console.log(scope);
      this.form = { ...scope };
    },
    // 保存编辑操作(post)
    saveEdit() {
      console.log(this.form);
      this.$axios
        .post(this.$api.tuihuo.updatePurchaseReturn, this.form, {
          headers: {
            "Content-Type": "application/json"
          }
        })
        .then(response => {
          var result = response.data;
          if (result.msg === "编辑成功!") {
            this.$message.success(result.msg);
            this.getData();
            this.editVisible = false;
          } else {
            this.$message.success(result.msg);
          }
        })
        .catch(err => {
          console.log(err);
          this.$message.eror({
            message: "请求出错,请检查",
            center: true,
            duration: 2000
          });
        });
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, "pageIndex", val);
      //this.getData((););
      this.showQueryData();
    }
  }
};
</script>

<style scoped>
p {
  text-align: center;
  font-size: 28px;
  color: rgb(96, 98, 102);
  margin: 5px auto 15px;
}
.handle-box {
  margin-bottom: 20px;
}
.handle-select {
  width: 120px;
}
.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.green {
  color: green;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
/* 编辑弹出框 */
.el-row {
  margin-bottom: 20px;
}
margin-bottom:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
/* 编辑弹出框结束 */
/* 新增弹出框里的input */
.input1 {
  width: 120px;
}
/* 新增查询里的btn */
.queryBtn {
  margin-bottom: 20px;
}
.block {
  width: 200px;
}
.aColor {
  color: white;
}
</style>
